<template>
  <div>
    <Header></Header>
    <div class="crumb">
      <div class="w">
        <div class="crumb-con">
          <a class="link" href="./index.html">睿购商城</a>
          <span>&gt;</span>
          <span class="link-text">商品列表</span>
        </div>
      </div>
    </div>
    <div class="page-wrap w">
      <ul class="sort-con">
        <li class="sort-item active" data-type="default">默认排序</li>
        <li class="sort-item" data-type="price">
          <span>价格</span>
          <i class="fa fa-sort-asc"></i>
          <i class="fa fa-sort-desc"></i>
        </li>
      </ul>
      <!-- list 容器 -->
      <ul class="p-list-con" v-for="item in itemList">
        <li class="p-item">
          <div class="p-img-con">
            <router-link class="link" :to="{'name':'itemDetail','query':{'productId':item.id}}" target="_blank">
              <img class="p-img" src="../assets/tv-small.jpg">
            </router-link>
          </div>
          <div class="p-price-con">
            <span class="p-price">{{item.price}}</span>
          </div>
          <div class="p-name-con">
            <router-link class="link" :to="{'name':'itemDetail','query':{'productId':item.id}}" target="_blank">
              {{item.name}}
            </router-link>
          </div>
        </li>

      </ul>
      <!-- 分页容器 -->
      <div class="page clearfix">
        <div id="J_bottomPage" class="p-wrap">
                    <span class="p-num">
                        <a class="pn-prev disabled">
                            <i>&lt;</i>
                            <em>上一页</em>
                        </a>
                        <a href="javascript:;" class="curr">1</a>
                        <a href="javascript:;">2</a>
                        <a href="javascript:;">3</a>
                        <a href="javascript:;">4</a>
                        <a href="javascript:;">5</a>
                        <a href="javascript:;">6</a>
                        <a href="javascript:;">7</a>
                        <b class="pn-break">...</b>
                        <a class="pn-next" href="javascript:;" title="使用方向键右键也可翻到下一页哦！">
                            <em>下一页</em>
                            <i>&gt;</i>
                        </a>
                    </span>
          <span class="p-skip">
                        <em>共<b>100</b>页&nbsp;&nbsp;到第</em>
                        <input class="input-txt" type="text" value="1">
                        <em>页</em>
                        <a class="btn btn-default" href="javascript:;">确定</a>
                    </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Nav from '../components/Nav.vue'
  import Header from '../components/Header'
    export default {
        name: "ItemList",
      data(){
          return {
            categoryId:'',
            itemList: []
          }
      },
      components:{Nav, Header},
      created() {
        //在生命周期回调方法中接受上一个路由传递过来的参数
        //route对象的query对象的categoryId属性
        this.categoryId = this.$route.query.categoryId;
        this.getItemList()
      },
      methods:{
          //查询商品列表的方法
        getItemList:function () {
          this.axios.get('/product/list.do',{params:{'keyword':'i','categoryId':this.categoryId}})
            .then( (response) => {
              console.log(response.data);
              this.itemList = response.data.data.list
            })
        }
      }
    }
</script>

<style>
  /* 排序按钮 */
  .sort-con{
    overflow: auto;
  }
  .sort-con .sort-item{
    float: left;
    display: inline-block;
    position: relative;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    margin-right: -1px;
    background: #fff;
    color: #333;
    cursor: pointer;
  }
  .sort-con .sort-item.active{
    background: #FF8800;
    border: 1px solid #FF8800;
    color: #fff;
  }
  .sort-con .sort-item .fa-sort-desc{
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .sort-con .sort-item.asc .fa-sort-desc{
    opacity: .6;
  }
  .sort-con .sort-item.desc .fa-sort-asc{
    opacity: .6;
  }

  /* 列表 */
  .p-list-con{
    margin-top: 15px;
    margin-right: -20px;
    overflow: hidden;
  }
  .p-list-con .p-item{
    position: relative;
    width: 180px;
    float: left;
    padding: 10px;
    margin: 0 20px 20px 0;
    background: #fff;
  }
  .p-list-con .p-item .p-img-con{
    width: 180px;
    height: 200px;
  }
  .p-list-con .p-item .p-img-con .p-img{
    width: 100%;
    height: 100%;
  }
  .p-list-con .p-item .p-price-con{
    height: 30px;
    line-height: 30px;
  }
  .p-list-con .p-item .p-price-con .p-price{
    font-size: 16px;
    color: #e7380d;
  }
  .p-list-con .p-item .p-name-con{
    height: 40px;
    overflow: hidden;
  }
  .p-list-con .p-item .p-name-con .p-name{
    line-height: 20px;
    margin-bottom: 10px;
    color: #666;
    text-decoration: none;
  }
  /* 错误信息 */
  .err-tip{
    height: 60px;
    line-height: 60px;
    color: #f60;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: #eee;
  }


  .page{
    display: block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 10px;
  }
  .page .p-wrap {
    margin-left: 200px;
  }
  .page .p-num {
    float: left;
  }
  .page .p-num .pn-next.disabled, .page .p-num .pn-prev.disabled {
    background: 0 0;
    background: #fff;
    cursor: default;
  }
  .page .p-num a {
    color: #333;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top,#f7f7f7,#f2f2f2);
    background-image: linear-gradient(top,#f7f7f7,#f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f2f2f2', GradientType=0);
  }
  .page .p-num a, .page .p-num b {
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 14px;
    margin-right: 5px;
    font-size: 14px;
  }
  .page .p-skip {
    float: left;
    margin-left: 20px;
  }
  .page .p-skip em {
    float: left;
    line-height: 38px;
    font-size: 14px;
  }
  .page .p-skip .input-txt {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 3px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
  }
  .page .p-skip .btn {
    float: left;
    height: 27px;
    margin-left: 10px;
    font-size: 14px;
    line-height: 27px;
  }
  .btn-default {
    border: 1px solid #DDD;
    padding: 4px 13px 5px;
    color: #666;
    background-color: #f7f7f7;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top,#f7f7f7,#f2f2f2);
    background-image: linear-gradient(top,#f7f7f7,#f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f2f2f2', GradientType=0);
  }
  .btn {
    display: inline-block;
    line-height: 14px;
    height: 14px;
    border-radius: 2px;
    background: #F7F7F7;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  strong, b {
    font-weight: bold;
  }
  em, i, u {
    font-style: normal;
  }
</style>

